<template>
  <div id="talenrank">
    <!-- 搜索 -->
    <search
      v-model="valueSerach"
      :active="active"
      @returnBack="returnBack"
      @returnBack1="returnBack1"
      @inputValue="inputValue"
    />
    <!-- tab -->
    <van-tabs
      :offset-top="$tabNavTopVal"
      v-model="active"
      title-active-color="#222"
      title-inactive-color="#888"
      sticky
      swipeable
      swipe-threshold="3"
    >
      <van-tab title="粉丝总榜">
        <Fans :valueSerach="valueSerach" v-if="active == 0" ref="refs1"></Fans>
      </van-tab>
      <van-tab title="地区排行榜">
        <region :valueSerach="valueSerach" v-if="active == 1" ref="refs2"></region>
      </van-tab>
      <van-tab title="蓝V榜">
        <Bluev :valueSerach="valueSerach" v-if="active == 2" ref="refs3"></Bluev>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Choice from '../../component/choice_2';
import Fans from './fans.vue';
import region from './region.vue';
import Bluev from './bluev';
import search from '@/component/search';
export default {
  name: '',
  components: {
    Choice,
    Fans,
    region,
    Bluev,
    search
  },
  data() {
    return {
      active: 0,
      valueSerach: '',
      newvalue1: ''
    };
  },
  computed: {},
  watch: {
    active(newValue) {
      this.valueSerach = '';
      if (window.pageYOffset != 0) {
        window.pageYOffset = 10;
      }
    },
    valueSerach: function () {}
  },
  activated() {
    if (this.$route.query.tab != undefined) {
      this.active = Number(this.$route.query.tab);
    }
  },
  created() {},
  mounted() {},
  methods: {
    returnBack(a) {
      this.valueSerach = this.trimStr(a);
      if (this.active == 0) {
        this.$refs.refs1.search(this.valueSerach);
      } else if (this.active == 1) {
        this.$refs.refs2.search(this.valueSerach);
      } else {
        this.$refs.refs3.search(this.valueSerach);
      }
    },
    returnBack1(a) {
      if (a) {
        // 搜索框为空时重新调接口
        if (this.active == 0) {
          this.$refs.refs1.search(a);
        } else if (this.active == 1) {
          this.$refs.refs2.search(a);
        } else {
          this.$refs.refs3.search(a);
        }
      }
    },
    // 搜索框为空的时候榜单刷新页面
    inputValue(val) {
      this.valueSerach = val;
    }
  }
};
</script>
<style lang="less" scoped>
//@import url();
#talenrank {
  overflow: hidden;
  min-height: 100vh;
}
</style>
